<template>
  <div class="children_warpper">
    <div>
      {{ name }}
    </div>
    <div>
      <h2>父组件传递的信息</h2>
      <button @click="clickUpdate">点击给你</button>
    </div>
  </div>
</template>

<script lang="ts" setup name="children1">
import { ref } from "vue";
const name = ref("我是子组件1");
//子组件接收父组件传递的信息  //可以书数组 也可以是对象
let propsInfo = defineProps(["modelValue"]);
console.log(propsInfo.modelValue);
const emit = defineEmits(["update:modelaVlue"]);
//简写defineModel
let modelValue = defineModel();
console.log(modelValue.value);

const clickUpdate = () => {
  modelValue.value = "我更新了你的值";
  // emit('update:modelaVlue', '我更新了你的值')
};
</script>

<style scoped>
.children_warpper {
  height: 100%;
  padding: 20px;
  background-color: gold;
  color: #000;
}
</style>
